<template>
  <div>
    <el-form class="filter-form-inline" label-position="right" label-width="110px" size="small">
      <el-row>
        <el-col :span="8">
          <el-form-item label="代理数量：">
            {{ formData?.agentNum }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="终端数量：">
            {{ formData?.terminalNum }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总金额：">
            <el-tooltip class="item" content="统计金额均为按终端价扣除配送费后统计的回款销售金额" effect="dark" placement="left"
              style="width: 100%;">
              <div class="title" style="width: 100%"> {{ isInteger(formData?.businessFlow?.totalAmount) }}元</div>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="代理营销金额：">
            {{ isInteger(formData?.agentAmount + formData?.agentPersonAmount) }}元
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="兼职大包金额：">
            {{ isInteger(formData?.agentPersonAmount) }}元
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="直销金额：">
            {{ isInteger(formData?.directAmount) }}元
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="第1终端金额：">
            {{ isInteger(formData?.firstTerminal) }}元
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="第2终端金额：">
            {{ isInteger(formData?.secondTerminal) }}元
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="第3终端金额：">
            {{ isInteger(formData?.thirdTerminal) }}元
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-table :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header"
            @row-click="rowClick">
            <el-table-column align="center" fixed="left" label="序号" type="index" width="50" />

            <el-table-column :min-width="140" :show-overflow-tooltip="true" align="center" fixed="left" label="营销/配送日期">
              <template #default="{row}">
                {{ dateFormat("yyyy-mm-dd", row.directionTime) }}
              </template>
            </el-table-column>

            <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="商品名"
              prop="productName" />

            <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="通用名"
              prop="productPopularName" />

            <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="生产厂家"
              prop="producer" />

            <el-table-column :min-width="180" :show-overflow-tooltip="true" header-align="center" label="批准文号"
              prop="approvalNumber" />

            <el-table-column :min-width="100" :show-overflow-tooltip="true" align="center" label="包装规格"
              prop="packSpecs" />

            <el-table-column :min-width="100" :show-overflow-tooltip="true" align="center" label="批号"
              prop="batchNumber" />

            <el-table-column :min-width="100" :show-overflow-tooltip="true" align="center" label="营销数量"
              prop="directionNumber" />

            <el-table-column :min-width="140" :show-overflow-tooltip="true" align="center" label="计价单位"
              prop="minSaleUnit">
              <template #default="{row}">
                {{ getLabel('sell_unit', row.minSaleUnit) }}
              </template>
            </el-table-column>

            <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="终端名称"
              prop="terminalName" />

            <el-table-column :min-width="100" :show-overflow-tooltip="true" align="center" label="终端类型">
              <template #default="{row}">
                {{ getLabel('app_mode', row.terminalType) }}
              </template>
            </el-table-column>

            <el-table-column :min-width="100" header-align="center" label="终端价(元)" prop="terminalPrice">
              <template #default="{row}">
                <div style="text-align: right">
                  {{ isInteger(row.terminalPrice) }}
                </div>
              </template>
            </el-table-column>

            <el-table-column :min-width="180" :show-overflow-tooltip="true" header-align="center" label="代理名称"
              prop="agentName" />

            <el-table-column :min-width="120" :show-overflow-tooltip="true" align="center" label="营销模式"
              prop="processDefinitionName">
              <template #default="{row}">
                <span v-if="row.agentType !== 'direct'">
                  <span v-if="row.agentAttribute === '1' ">区域招商</span>
                  <span v-if="row.agentAttribute === '2' ">精细招商</span>
                </span>
                <span v-else> 终端直销</span>
              </template>
            </el-table-column>

            <el-table-column :min-width="120" align="center" fixed="right" label="交易价(元)" prop="tradePrice">
              <template #default="{row}">
                <div style="text-align: right">
                  {{ isInteger(row.tradePrice) }}
                </div>
              </template>
            </el-table-column>

            <el-table-column :min-width="120" align="center" fixed="right" label="配送费(元)" prop="distributePrice">
              <template #default="{row}">
                <div v-if="row.computeMode==='固定价格'" style="text-align: right">
                  <span>{{ isInteger(row.distributePrice) }}元</span><span> / {{
                    getLabel('sell_unit', row.minSaleUnit)
                  }}</span>
                </div>
                <div v-if="row.computeMode==='终端价百分比'">
                  <span>{{ row.distributePrice }}%</span><span>终端价</span>
                </div>
              </template>
            </el-table-column>

            <!-- <el-table-column :min-width="140" align="center" fixed="right" label="终端价营销额(元)" prop="terminalAmount">
              <template #default="{row}">
                <div style="text-align: right">
                  {{ isInteger(row.terminalAmount) }}
                </div>
              </template>
            </el-table-column>

            <el-table-column :min-width="120" align="center" fixed="right" label="回款营销额(元)" prop="returnAmount">
              <template #default="{row}">
                <div style="text-align: right">
                  {{ isInteger(row.returnAmount) }}
                </div>
              </template>
            </el-table-column> -->
          </el-table>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script>
import { getCurrentInstance, inject, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "FlowDetails",
  props: {
    formData: {
      type: Object,
      default() {
        return {
          businessFlow: {},
          DeliveryDirection: {},
        };
      },
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  setup(props) {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    var data = reactive({
      activeName: "1",
      formData: {},
    });
    const currentInstance = getCurrentInstance();
    // watch(() => props.formData, (newval, oldval) => {
    //     if (newval) {
    //       data.formData = newval
    //       console.log(data.formData,"============")
    //     }
    //   },
    //   {immediate: true, deep: true}
    // )

    return {
      ...toRefs(data),
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
